<template>
    <div class="popup">
        <el-dialog
                v-model="dialogVisible"
                :title="popupTitle"
                width="50%"
                :before-close="handleClose">
            <div class="popup-html">
                <base-forms
                        ref="baseFormsRef"
                        :labelWidth="150"
                        :formsInline='true'
                        :formFile="formFile"
                        :rules="formRules"
                        :confirm="confirm"
                        :cancel="handleClose">
                </base-forms>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
    import { ElMessage } from 'element-plus'
    import { ref,onMounted,nextTick ,reactive} from 'vue'
    import baseForms from '../../components/baseForms/baseForms.vue'


    const dialogVisible = ref(false);
    const popupTitle = ref('');
    const baseFormsRef = ref();

    // 定义表单数据
    const formFile = ref([
        {title:'名称',type:'input',prop:'name',disabled:false,show:true,prompt:'请输入名称'},
        {title:'角色',type:'select',prop:'role',formChange:roleChange,disabled:false,multiple:true,show:true,children:[
            {value:1,label:'管理员'},
            {value:2,label:'用户'},
            {value:3,label:'运维'},
        ]},
        {title:'性别',type:'radio',prop:'sex',disabled:false,show:true,children:[
            {value:1,label:'男'},
            {value:2,label:'女'},
        ]},
        {title:'时间选择器',type:'timePicker',prop:'timePicker',valueFormat:'HH:mm',isRange:false,disabled:false,show:true,prompt:'请选择时间'},
        {title:'时间段选择器',type:'timePicker',prop:'timePickers',valueFormat:'HH:mm',isRange:true,disabled:false,show:true,prompt:'请选择时间'},
        {title:'日期选择器',type:'datePicker',prop:'dayPicker',dateType:'date',valueFormat:'YYYY-MM-DD',disabled:false,show:true,prompt:'请选择时间'},
        {title:'周选择器',type:'datePicker',prop:'weekPicker',dateType:'week',disabled:false,show:true,prompt:'请选择时间'},
        {title:'月选择器',type:'datePicker',prop:'monthPicker',dateType:'month',valueFormat:'YYYY-MM',disabled:false,show:true,prompt:'请选择时间'},
        {title:'年选择器',type:'datePicker',prop:'yearPicker',dateType:'year',valueFormat:'YYYY',disabled:false,show:true,prompt:'请选择时间'},
        {title:'日期范围选择器',type:'datePicker',prop:'dayPickers',dateType:'daterange',valueFormat:'YYYY-MM-DD',disabled:false,show:true,prompt:'请选择时间'},
        {title:'上传文件',type:'uploadFile',prop:'uploadFile',show:true,},
        {title:'树形选择器',type:'treeSelect',prop:'treeSelect',checkStrictly:true,disabled:false,show:true,prompt:'请选择内容',children:[
            {
                value: '1',
                label: 'Level one 1',
                children: [
                    {
                        value: '1-1',
                        label: 'Level two 1-1',
                        children: [
                            {
                                value: '1-1-1',
                                label: 'Level three 1-1-1',
                            },
                        ],
                    },
                ],
            },
            {
                value: '2',
                label: 'Level one 2',
                children: [
                    {
                        value: '2-1',
                        label: 'Level two 2-1',
                    },
                ],
            },
        ]},
        {title:'文本域',type:'textarea',prop:'textarea',rows:'3',disabled:false,show:true,prompt:'请输入内容'},

    ]);
    // 定义表单验证
    const formRules = ref({
        name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        role:[
            { required: true, message: '请选择角色', trigger: 'change' },
        ]
    });
    // 表单数据返现
    const formData = ref({
        name:'',
        sex:'',
    });


    // 初始化
    const initialization = (row)=>{
        dialogVisible.value = true;
        if(row){
            popupTitle.value = '修改';
            formData.value.name = row.name;
            nextTick().then(() => {
                baseFormsRef.value.setFormData(formData.value); // 修改时直接给表单赋值
            });
        }else {
            popupTitle.value = '新增';
        }




    };

    // 页面提交方法
    const confirm =(formData) =>{
        console.log(formData)
    };


    // 关闭弹窗
    const handleClose = ()=>{
        baseFormsRef.value.baseResetFields(); // 关闭弹窗时重置表单数据
        dialogVisible.value = false
    };

    // 角色下拉框change事件
    function roleChange (val){
        console.log(val)
    };

    // 将子组件方法暴露给父组件
    defineExpose({
        initialization,
    })



</script>

<style lang="scss" scoped>
    .popup{

    }

</style>
